<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>我的网盘</title>
    <link rel="stylesheet" th:href="@{/mystyle/css/bootstrap.min.css}">
    <div th:include="common :: commonheader"></div>
    <link rel="stylesheet" th:href="@{/mystyle/css/myCss.css}">
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common::#leftmenu"></div>
    <!-- left side end-->
    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div th:replace="common::header-section"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                我的网盘
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#" th:href="@{/index.html}">首页</a>
                </li>
                <li class="active"> 我的网盘 </li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            网盘信息
                        </header>
                        <div class="panel-body">
                            <ol class="breadcrumb pull-left" id="curNav">
                            </ol>
                            <div class="btn-group- pull-right">
                                <button type="button" class="btn btn-primary">
                                    <i class="fa fa-check-square-o"></i> Select all</button>
                                <button type="button" class="btn btn-primary" id="mkdir">
                                    <i class="fa fa-folder-open" id="test"></i>创建文件夹</button>
                                <button type="button" class="btn btn-primary">
                                    <i class="fa fa-trash-o"></i> Delete</button>


                            </div>
                            <div class="btn-group pull-right mr-2">
                                <form id="upFile" method="post" enctype="multipart/form-data">
                                    <div class="form-group d-flex justify-content-center">
                                        <input type="file" id="uploadFile" class="form-control-file btn btn-sm btn-primary" name="file" multiple>
                                        <button class="btn btn-sm btn-primary" id="fileSubmit"><i class="fa fa-upload"></i>提交</button>
                                    </div>

                                </form>
                            </div>



                            <table class="table table-striped table-hover dataTable" id="editable-sample" aria-describedby="editable-sample_info">
                                <thead>
                                <tr role="row">
                                    <th class="sorting">#</th>
                                    <th class="sorting" role="columnheader" rowspan="1" colspan="1" aria-label="First Name" style="width: 206px;">文件名</th>
                                    <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Last Name: activate to sort column ascending" style="width: 202px;">修改时间</th>
                                    <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Points: activate to sort column ascending" style="width: 130px;">类型</th>
                                    <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 246px;">大小(MB)</th>
                                    <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Edit: activate to sort column ascending" style="width: 90px;">操作</th>
                                </tr>
                                </thead>

                                <tbody role="alert" aria-live="polite" aria-relevant="all" id="table_body">


                                </tbody>
                                </table>

                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2020 &copy; AdminEx by ThemeBucket </a>
        </footer>
        <!--footer section end-->

        <!--    提示框    -->
        <div class="toast hide" data-delay="3000" id="myToast" style="position: fixed;top: 60px;right: 10px;">
            <div class="toast-header">
                <strong class="mr-auto ml-1">信息提示</strong>
                <small>一分钟前</small>
                <button class="close mb-1 ml-1" data-dismiss="toast">&times;</button>
            </div>
            <div class="toast-body" id="toastMsg">

            </div>
        </div></div>
        <!-- 修改文件 -->

    <!-- main content end-->
</section>
<input type="hidden" id="savePath">
<div class="bg-dark" id="option" style="display: none;">
    <div class="">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加文件夹</h5>
            </div>

            <div class="modal-body">
                <p>输入文件夹名字</p>
                <label for="" class="text-danger"></label>
                <input type="text" class="form-control" id="fileName">

                <p>当前路径</p>
                <input type="text" class="form-control disabled" id="path" readonly>

            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="optionClose">取消</button>
                <button class="btn btn-primary" id="optionSave">确定</button>
            </div>
        </div>
    </div>


</div>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>
<script th:src="@{/mystyle/js/bootstrap.min.js}"></script>
<script th:src="@{/mystyle/js/bootstrap.bundle.min.js}"></script>
<script src="js/jquery.isotope.js"></script>


<script type="text/javascript">

    $(function() {
        var user = [[${session.loginUser.phone}]]
        var com = "http://localhost:8080/"
        // 进入页面发起第一次请求
        $.ajax({
            url:com+"data/getFilesInfo/"+user,
            type:"POST",
            success:function(result){
                var table_body = $("#table_body")
                table_body.empty()
                var datas = result.extend.data;
                create_trData(datas,table_body)

                // 创建导航路径
                var curPath = result.extend.curPath
                $("#curNav").empty()
                create_Nav(curPath,$("#curNav"))

                $("#savePath").val(user)

            }
        })

        // 创建导航节点函数
        var create_Nav = function(curPath,Nav){
            if (curPath==""){
                curPath = "/"+user
            }
            var paths = curPath.split("/")

            paths.forEach(path => {
                if (path==""){
                    return
                }
                var a = $("<a></a>").append(path)
                var li = $("<li></li>").append(a)
                Nav.append(li)
            })
        }

        // 创建tr节点的函数
        var create_trData = function(datas,tableId){
            if (datas===null){
                return;
            }
            // var index = 0;
            datas.forEach(data => {
                var input = $('<td class="" style="width:10px;height: 10px;"><input type="checkbox" name="" ></td>')
                var fileName = $("<td></td>")
                var upTime = $("<td></td>").append(data.upTime)
                var type = $("<td></td>").append( data.isFile===true?"文件":"文件夹" )
                var size = $("<td></td>").append(data.size)
                var optionDelete = $("<a href='javascript:;'></a>").attr("path",data.filePath).attr("class","delete").append("删除")
                var optionDownload = $("<a href='javascript:;'></a>").attr("path",data.filePath).attr("class","download").append("下载")
                var option = $("<td></td>").append(optionDelete)
                if (!data.isFile){
                    var a = $("<a href='javascript:;'></a>").attr("path",data.filePath).append(data.fileName).attr("class","into")
                    fileName.append(a)
                }else{
                    fileName.append(data.fileName)
                    option.append(optionDownload)
                }

                var tr = $('<tr></tr>').append(input).append(fileName).append(upTime).append(type).append(size).append(option)
                // console.log(tr[0])
                tableId.append(tr)

            })
        }

        // 获取文件信息函数
        var getFileInfo = function(path){
            $.ajax({
                url:com+"data/getFilesInfo/"+user,
                type:"POST",
                data:"path="+path,
                success:function(result){
                    var table_body = $("#table_body")
                    table_body.empty()
                    var datas = result.extend.data;
                    create_trData(datas,table_body)

                    // 获取当前的路径
                    var curPath = result.extend.curPath
                    $("#savePath").val(curPath)
                    // 修改导航结构
                    $("#curNav").empty()
                    create_Nav(curPath,$("#curNav"))

                }
            })
        }

        // 点击文件夹跳转到文件夹内部
        $("#table_body").on("click",".into",function(){
            var path = $(this).attr("path")
            console.log($(this).attr("id"))

            getFileInfo(path)
            return false;
        })

        // 删除文件
        $("#table_body").on("click",".delete",function(){
            var path = $(this).attr("path")

            var parentTr = $(this).parents("tr")
            $.ajax({
                url:com+"data/deleteFile/"+user,
                type:"POST",
                data:"path="+path,
                success:function(result){
                    if (result.code === 100){
                        parentTr.remove()
                        showToast(result.msg)
                    }else {
                        showToast(result.msg)
                    }
                }
            })
            return false;
        })

        // 点击新增文件夹的效果
        $("#mkdir").click(function () {
            $("#option").show();
            // 获取当前目录信息
            var curPath = $("#savePath").val();
            $("#path").val(curPath)

        })

        // 点击提交按钮创建文件夹
        $("#optionSave").click(function(){
            // 准备创建文件的路径
            var savePath = $("#savePath").val()
            console.log()
            var curPath = savePath +"/"+ $("#fileName").val()
            $.ajax({
                url:com+"data/mkdirFolder/"+user,
                type:"POST",
                data:"path="+curPath,
                success:function(result){
                    // 创建成功
                    if (result.code==100){
                        $("#option").hide();
                        showToast(result.msg)
                        $("#fileName").val("")
                        getFileInfo(savePath)
                    }else{
                        $("#option label").html(result.msg)
                    }

                }
            })
        })

        $("#optionClose").click(function () {
            $("#option").hide()
        })

        var showToast = function(msg){
            $("#myToast").toast("show")
            $("#toastMsg").text(msg)
        }

        // 上传文件
        $("#fileSubmit").click(function () {
            var curPath = $("#savePath").val()
            var formdata = new FormData()

            var uploadFile = $("#uploadFile")[0].files

            // 多文件上传
            for (var i=0;i<uploadFile.length;i++){
                console.log(uploadFile[i])
                formdata.append("fileData",uploadFile[i])
            }

            console.log(uploadFile.length)
            formdata.append("path",curPath)
            // formdata.append("fileData",uploadFile)
            // formdata.append("fileName",uploadFile.name)
            $.ajax({
                url:com+"data/uploadFile/"+user,
                type:"POST",
                cache:false,
                processData: false,  // 不处理数据
                contentType: false,   // 不设置内容类型
                data:formdata,
                success:function (result) {
                    showToast(result.msg)
                    $("#upFile")[0].reset();
                    getFileInfo(curPath)
                },
                error:function(error){
                    alert(error)
                }
            })
            return false
        })

        // 下载文件
        $("#table_body").on("click",".download",function(){
            var curPath = $(this).attr("path")
            var downloadA = $("<a></a>").attr("href",com+"data/downloadFile/"+user+"?path="+curPath)

            downloadA[0].click()
        })

    });

</script>
<script>


</script>

</body>
</html>
